import React from "react";
import { Text } from "react-native";
import { commonStyles } from "../../configs/commonStyle";
import BasePage from "../BasePage";
import { inject, observer } from "mobx-react";
import { TouchableOpacity, View } from "react-native-ui-lib";
import { ButtonGroup } from "react-native-elements";
import NavigationBar from "../common/NavigationBar";
import ViewUtils from "../../utils/ViewUtils";
import TransferList from "./TransferList";
import TransferCake from "./TransferCake";
import TransferAbnormal from "./TransferAbnormal";
import TransferParts from "./TransferParts";
import { windowWidth } from "../../configs/platform";
import { TabBar, TabBarIndicator, TabView } from "react-native-tab-view";
import ListEmpty from "../common/ListEmpty";
import {getUnDisposePartsCount} from '../../net/transfer';
import moment from "moment";
import { logger } from "../../utils/util";

/**
 * 中转中心
 */
@inject("userStore", "appStore")
@observer
export default class TransferCenter extends BasePage {

  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      routes: [
        { key: "0", title: "中转蛋糕" },
        { key: "1", title: "中转记录" },
        { key: "2", title: "中转配件" },
        { key: "3", title: "异常记录" },
      ],
    };
  }

  renderTabBar = (props) => {
    return (
      <TabBar
        {...props}
        style={{ backgroundColor: "white", elevation: 0, alignSelf: "center", height: 45, marginBottom: 8 }}
        activeColor={"#F9D63B"}
        inactiveColor={"#6F6F6F"}
        scrollEnabled
        tabStyle={{ width: windowWidth / 4 }}
        labelStyle={{}}
        renderIndicator={indicatorProps => {
          const width = indicatorProps.getTabWidth(this.state.index);
          return <TabBarIndicator {...indicatorProps} width={30}
                                  style={{ left: (width - 30) / 2, backgroundColor: "#F9D63B" }} />;
        }}
      />
    );
  };

  componentDidMount() {
    this.getUnDisposePartsCount({
      timeStart: moment().format('YYYY-MM-DD 00:00:00'),
      timeEnd: moment().format('YYYY-MM-DD 23:59:59'),
    })
  };

  // 获取中转配件未处理
  getUnDisposePartsCount(params) {
    const { routes } = this.state
    getUnDisposePartsCount(params).then(res => {
      routes[2].title = `中转配件(${res.result || 0})`
      this.setState({routes})
    })
  };
  
  render() {
    const indexPageMap = {
      '0': <TransferCake />,
      '1': <TransferList />,
      '2': <TransferParts getUnDisposePartsCount={(params) => this.getUnDisposePartsCount(params)}/>,
      '3': <TransferAbnormal />,
    }
    return (
      <View useSafeArea style={commonStyles.body_primary}>
        <NavigationBar
          title={"中转中心"}
          backgroundColor={"transparent"}
          leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
        />
        <View style={commonStyles.container}>
          <TabView
            lazy
            navigationState={this.state}
            renderScene={({ route }) => indexPageMap[route.key]}
            initialLayout={{ width: windowWidth }}
            onIndexChange={(index) => this.setState({ index })}
            renderTabBar={this.renderTabBar}
            renderLazyPlaceholder={() => <ListEmpty showEmpty={true} />}
          />
        </View>
      </View>
    );
  }
}

